
//dom get 封装
function query(dom) {
    return document.querySelector(dom)
}

var dragCheck = {
    //滑动验证码方法
    verify: function (arr, box, imgbox, btn, img, que, slider, btit, tu, passBar) {
        var atu = arr[Math.floor(Math.random() * (arr.length))]
        tu.src = atu;
        img.style.backgroundImage = " url(" + atu + ")"
        var tap = imgbox.offsetHeight - img.offsetHeight
        var left =
            Math.random() * (imgbox.offsetWidth - img.offsetWidth - imgbox.offsetWidth / 2) + imgbox.offsetWidth / 2;
        var tops = Math.random() * (tap);
        img.style.top = tops + "px"
        que.style.top = tops + "px"
        que.style.left = left + "px"
        img.style.backgroundPositionY = -tops + "px";
        img.style.backgroundPositionX = -left + "px";

        btn.onmousedown = function () {
            img.style.opacity = "1"
            que.style.opacity = "1"
            passBar.innerHTML = "";
            btit.innerHTML = "拖动图片完成验证";
            slider.onmousemove = function (event) {
                var zuo = event.clientX - box.offsetLeft - slider.offsetLeft;
                if (zuo > slider.offsetWidth) {
                    zuo = slider.offsetWidth - img.offsetWidth / 2
                }
                btn.style.left = zuo + "px";
                img.style.left = zuo + "px";
                passBar.style.width = zuo + 10 + "px"
            }
        }

        box.onmouseup = function () {
            var yes = que.offsetLeft - img.offsetLeft
            slider.onmousemove = null
            if (yes < 10 && yes > -10) {
                btit.innerHTML = "验证成功√"
                passBar.innerHTML = "验证成功"
                btit.style.color = "chartreuse"
                img.style.opacity = "0";
                que.style.opacity = "0";
                return "yes"
            } else {
                btit.innerHTML = "验证失败X"
                passBar.innerHTML = ""
                btit.style.color = "red";
                zuo = 0
                btn.style.left = zuo + "px";
                img.style.left = zuo + "px";
                passBar.style.width = zuo + "px"
            }
        }
    }
}

function init() {
    var bigbox = document.createElement("div");
    bigbox.id = "box";
    bigbox.innerHTML = `<h3 class="btit">请拖拽完成验证</h3>
                        <div class="img">
                            <img src="img/drag1.png" alt="..." id="tu">
                            <div class="block"></div>
                            <div class="block2"></div>
                        </div>
                        <div class="slider">
                            <div class="pass-bar"></div>
                            <button type="button" id="btn"></button>
                        </div>`
    document.body.appendChild(bigbox);
    var box = query("#box")
    var imgbox = query(".img");
    var btn = query("#btn");
    var img = query(".block");
    var que = query(".block2");
    var slider = query(".slider");
    var btit = query(".btit");
    var tu = query("#tu");
    var arr = ["img/drag1.jpg", "img/drag2.jpg", "img/drag3.jpg", "img/drag4.jpg", "img/drag5.jpg"];
    var passBar = query(".pass-bar");
    return dragCheck.verify(arr, box, imgbox, btn, img, que, slider, btit, tu, passBar)
}